<template>
  <div>
    <introduce>
      <span class="title-gray" slot="pre">设备/</span>
      <span class="title-bold" slot="title"> 网关列表</span>
      <span slot="info">
        -
        展示EUI、名称、状态等设备信息，可根据EUI、状态，和绑定时间等条件筛选具体的网关。</span
      >
    </introduce>
    <el-tabs
      type="border-card"
      @tab-click="changetabFun"
      v-model="query.agreement"
    >
      <el-tab-pane label="所有设备" name="all"> </el-tab-pane>
      <el-tab-pane label="LoRaWAN" name="LoRaWAN"></el-tab-pane>
      <el-tab-pane label="LoRaPP" name="LoRaPP"></el-tab-pane>
      <div>
        <el-form label-width="80px">
          <el-form-item label="在线状态:">
            <el-select v-model="query.online">
              <el-option value="" label="全部"></el-option>
              <el-option :value="true" label="在线"></el-option>
              <el-option :value="false" label="离线"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="EUI:">
            <el-input
              v-model.trim="query.eui"
              style="width: 217px"
              placeholder="设备EUI"
            ></el-input>
          </el-form-item>
          <el-form-item label="绑定时间:">
            <el-date-picker
              v-model="query.date"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button-group>
              <el-button
                type="primary"
                icon="el-icon-search"
                size="mini"
                @click="search"
                >搜索</el-button
              >
              <el-button
                type="primary"
                icon="el-icon-delete"
                size="mini"
                @click="clearQuery"
                >清除条件</el-button
              >
              <el-button
                type="primary"
                icon="el-icon-refresh"
                size="mini"
                @click="refresh"
                >刷新</el-button
              >
            </el-button-group>
            <span style="color: #7f8183; font-size: 14px">
              &nbsp;搜索结果：{{ total }}</span
            >
          </el-form-item>
        </el-form>
      </div>
    </el-tabs>
    <el-table :data="gatewayList" stripe style="width: 100%; margin-top: 10px">
      <el-table-column type="index" width="50"> </el-table-column>
      <el-table-column prop="eui" label="EUI" width="180"> </el-table-column>
      <el-table-column prop="name" label="设备名称" width="180">
      </el-table-column>
      <el-table-column prop="mhz" label="频率MHz"> </el-table-column>
      <el-table-column label="在线状态">
        <template slot-scope="scope">
          {{ scope.row.online ? "在线" : "离线" }}
        </template>
      </el-table-column>
      <el-table-column prop="country" label="国家"> </el-table-column>
      <el-table-column prop="agreement" label="组网协议类型"> </el-table-column>
      <el-table-column label="绑定时间">
        <template slot-scope="scope">
          {{ scope.row.bTime | dateformat }}
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="query.currPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="query.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import Introduce from "@/components/Introduce.vue";
import { $gatewayList } from "@/api/index";
export default {
  name: "wangGuan",
  components: {
    Introduce,
  },
  data() {
    return {
      gatewayList: [],
      total: 0,
      query: {
        currPage: 1,
        pageSize: 5,
        eui: "",
        online: "",
        agreement: "all",
        date: [],
      },
    };
  },
  computed: {
    dateStr() {
      let d1 = this.query.date[0];
      let d2 = this.query.date[1];
      let start = d1 && d1.getTime();
      let end = d2 && d2.getTime();
      if (start && end) {
        return start + "-" + end;
      }
      return "";
    },
  },
  methods: {
    clearQuery() {
      this.query = {
        currPage: 1,
        pageSize: 5,
        eui: "",
        online: "",
        agreement: "all",
        date: [],
      };
      this.getGateWayList();
    },
    refresh() {
      this.$router.go(0);
    },
    getGateWayList() {
      if (this.query.date && this.query.date.length !== 0) {
        var dateArr = this.query.date;
        this.query.date = this.dateStr;
      }
      $gatewayList(this.query).then((res) => {
        this.gatewayList = res.data.data;
        this.total = res.data.total;
      });
      this.query.date = dateArr;
    },
    changetabFun() {
      this.getGateWayList();
    },
    search() {
      this.query.currPage = 1;
      this.getGateWayList();
    },
    handleSizeChange(count) {
      this.query.pageSize = count;
      this.query.currPage = 1;
      this.getGateWayList();
    },
    handleCurrentChange(page) {
      this.query.currPage = page;
      this.getGateWayList();
    },
  },
  filters: {
    dateformat(val) {
      let t = new Date(+val);
      let y = t.getFullYear();
      let m = (t.getMonth() + 1 + "").padStart(2, "0");
      let d = (t.getDate() + "").padStart(2, "0");
      return `${y}-${m}-${d}`;
    },
  },
  mounted() {
    this.getGateWayList();
  },
};
</script>

<style lang="less" scoped>
.block {
  text-align: center;
}
</style>